<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="title">作业管理系统</h2>
      <h3 class="title">LOGIN</h3>
      <div class="form-container">
        <div class="form-item">
          <input type="text" v-model="userId" placeholder="请输入账号" class="input-box">
        </div>
        <div class="form-item">
          <input type="password" v-model="password" placeholder="请输入密码" class="input-box">
        </div>
        <div class="role-container">
          <span>角色</span>
          <label><input type="radio" v-model="role" value="admin">管理员</label>
          <label><input type="radio" v-model="role" value="teacher">教师</label>
          <label><input type="radio" v-model="role" value="student">学生</label>
        </div>
        <button class="login-btn" @click="handleLogin">登录</button>
      </div>
    </div>
    <!-- 登录页底部版权 -->
    <div class="footer">
      <el-text size="small" class="">
        Copyright © 2025 作业管理 All Rights Reserved.
      </el-text>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import router from "@/router/index.js";
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      userId: '',
      password: '',
      role: 'admin'
    };
  },
  methods: {
    async handleLogin() {
      console.log('登录按钮被点击');

      // 验证表单
      if (!this.userId || !this.password) {
        ElMessage.warning('请输入用户名和密码');
        return;
      }

      try {
        const apiUrl = this.getApiUrlByRole();
        console.log('请求URL:', apiUrl);

        const params = this.role === 'admin'
            ? { account: this.userId, password: this.password }
            : this.role === 'teacher'
                ? { teacher_id: this.userId, password: this.password }
                : { student_id: this.userId, password: this.password };

        console.log('请求参数:', params);

        const response = await axios.get(apiUrl, { params });
        console.log('响应数据:', response.data);

        // 登录成功地判断条件
        if (response.data.flag) {
          if (this.role === 'admin'){
            localStorage.setItem('adminId', this.userId); // 存储管理员账号作为ID
            console.log('当前登录管理员id：',localStorage.getItem('adminId'));
            router.push('/admin');
          } else if (this.role === 'teacher') {
            localStorage.setItem('teacherId', this.userId); // 存储教师工号
            console.log('当前登录教师id：',localStorage.getItem('teacherId'));
            router.push('/teachers');
          } else if (this.role === 'student') {
            localStorage.setItem('studentId', this.userId); // 存储学生学号
            localStorage.setItem('classId',response.data.result.classId);// 存储学生班级
            console.log('当前登录学生id:', localStorage.getItem('studentId'));
            router.push('/students');
          }
          ElMessage.success(`成功跳转到${this.role}页面`);
        } else {
          ElMessage.error('登录失败：用户名或密码错误');
          console.log('登录失败响应：', response.data);
        }
      } catch (error) {
        ElMessage.error('请求出错，请检查网络或重试');
        console.error('登录请求错误：', error);
      }
    },
    getApiUrlByRole() {
      return {
        admin: '/administrator/login',
        teacher: '/teachers/login',
        student: '/students/login'
      }[this.role];
    }
  }
};
</script>

<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(245, 245, 245, 0.8);
  padding: 10px 0;
  z-index: 10;
}

.login-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('@/assets/images/login-bg.svg') no-repeat center center fixed;
  background-size: cover;
  padding: 20px;
  box-sizing: border-box;
}

.login-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  margin: 20px;
}

.title {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-item {
  width: 100%;
}

.input-box {
  width: 100%;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color 0.3s;
}

.input-box:focus {
  outline: none;
  border-color: #3f7ffd;
}

.role-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.role-container label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.role-container input[type="radio"] {
  width: 18px;
  height: 18px;
  border: 2px solid #ddd;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
}

.role-container input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #3f7ffd;
}

.login-btn {
  height: 50px;
  background-color: #3f7ffd;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.login-btn:hover {
  background-color: #2a6ee5;
}
</style>